<template>
  <div class="login">
    <div class="login-con">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>欢迎登录</span>
        </div>
        <div class="login-con-body">
          <el-form :model="formInfo" :rules="rules" ref="loginForm" size="small">
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名" v-model="formInfo.username">
                <el-button slot="prepend" icon="el-icon-user-solid"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" placeholder="请输入密码" v-model="formInfo.password">
                <el-button slot="prepend" icon="el-icon-lock"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="logIn" style="width: 100%">登 录</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearFormInfo" style="width: 100%">清空</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { logIn } from "@/http/api";
export default {
  data() {
    return {
      formInfo: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    logIn() {
      // axios
      //   .post("login", {
      //     username: this.formInfo.name,
      //     password: this.formInfo.password
      //   })
      //   .then(res => {
      //     if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
      //       this.$message({
      //         message: "欢迎回来，"+res.data.data.username,
      //         type: "success"
      //       });
      //     }
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          logIn({
            ...this.formInfo
          }).then(res => {
            console.log(1111,res)
            this.$message({
              message: "欢迎回来，" + res.data.username
            });
            this.$store.commit("setToken", res.data.token);
            this.$store.commit("setUserName", res.data.username);
            this.$router.push({ name: "home" });
          });
        } else {
          return false;
        }
      });
    },
    clearFormInfo() {
      this.$refs.loginForm.resetFields()
    }
  }
};
</script>
<style lang="stylus" scoped>
.login
  position absolute
  top 0
  bottom 0
  left 0
  width 100%
  background url('https://file.iviewui.com/admin-dist/img/login-bg.0899ffa6.jpg') center center no-repeat
  background-size cover
  display flex
  align-items center
  justify-content flex-end
  .login-con
    width 300px
    margin-right 160px
</style>